<template>
  <el-dialog :visible.sync="opened" @close="close" :lock-scroll="false" append-to-body>
    <template #title>
      <div class="dialog-title">
        <div class="title">{{title}}</div>
      </div>
    </template>
    <div class="dialog-container">
      <div class="content" ref="dialogContent">
        <ul>
          <li class="item" v-for="(item, index) of data" :key=index>
            <el-image :src="item.url" lazy @load="imgLoadHandle"></el-image>
          </li>
        </ul>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { couponsList } from '../../../assets/demo/coupons/coupons'
export default {
  name: 'SelectCouponTemplate',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    num: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      title: '选择优惠券模板',
      opened: false,
      gapW: 10,
      gapH: 10,
      arr: []
    }
  },
  watch: {
    visible (val) {
      this.opened = !!val
      this.$nextTick(() => {
        // this.wallFall()
      })
    }
  },
  computed: {
    data () {
      return couponsList[this.num]
    }
  },
  mounted () {},
  methods: {
    // 瀑布流
    wallFall () {
      const { width: pageWidth } = this.getClient()
      const itemNodes = this.$refs['dialogContent'].children[0].children
      const itemWidth = itemNodes[0].offsetWidth // 200
      const gapW = this.gapW
      const gapH = this.gapH
      const columns = parseInt(pageWidth / (itemWidth + gapW)) // 取瀑布流能容纳的列
      const arr = []
      for(let i = 0, l = itemNodes.length; i < l; i++) { // 循环节点
        if (i < columns) {
          // 第一行
          itemNodes[i].style.top = 0
          itemNodes[i].style.left = (itemWidth + gapW) * i + 'px'
          arr.push(itemNodes[i].offsetHeight)
        } else {
          // 其它行
          let minHeight = arr[0]
          let index = 0
          for(let i = 0, l = arr.length; i < l; i++) { // 获取最小高度
            if (minHeight > arr[i]) {
              minHeight = arr[i]
              index = i
            }
          }
          // 设置下一行第一个的位置
          itemNodes[i].style.top = arr[index] + gapH + 'px'
          itemNodes[i].style.left = itemNodes[index].offsetLeft + 'px' // left就是最小列距离左边的值
          // 修改最小列高度
          arr[index] = arr[index] + itemNodes[i].offsetHeight + gapH
        }
      }
    },
    getClient() {
      const dialogContent = this.$refs['dialogContent']
      return {
          width: dialogContent.clientWidth || 0,
          height: dialogContent.clientHeight || 0
      }
    },
    imgLoadHandle () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        console.log(1)
        this.wallFall()
        clearTimeout(this.timer)
      }, 0)
    },
    close () {
      this.$emit('update:visible', false)
    },
    save () {
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-title {
  .title {
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eeeded;
  }
}
.dialog-container {
  overflow: hidden;
  .content {
    height: 600px;
    ul {
      position: relative;
      li {
        width: 200px;
      }
      .item {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        transition: all 1s;
        box-sizing: border-box;
        box-shadow: 2px 2px 2px #999;
      }
    }
  }
}
</style>